<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box div {
				width: 156px;
				height: 100px;
				border: 2px solid red;
				font-size: 25px;
				display: none;
			}
			
			#box div:nth-of-type(1) {
				color: #C5EBF0;
			}
			
			#box div:nth-of-type(2) {
				color: palevioletred;
			}
			
			#box div:nth-of-type(3) {
				color: blue;
			}
			
			#box .active {
				background: yellow;
				color: white;
			}
		</style>
	</head>

	<body>
		<div id="box">
			<input type="button" value="选项1" class="active" />
			<input type="button" value="选项2" />
			<input type="button" value="选项3" />
			<div style="display: block;">选项22222222 </div>
			<div>选项33333333</div>
			<div>选项44444444</div>
		</div>

		<script>
			window.onload = function() {
				var Tab = new add("box")
			}
			function add(obj) {
				var oBox = document.getElementById(obj);
				this.oInp = oBox.getElementsByTagName("input");
				this.oDiv = oBox.getElementsByTagName("div");
				var i = 0;
				var _this = this;
				for(var i = 0; i < this.oInp.length; i++) {
					this.oInp[i].index = i;
					this.oInp[i].onclick = function() {
						console.log(this.oInp)
						//alert(_this.oInp[i])
						_this.inps(this);
					}
				}

			}
			add.prototype.inps = function(oInp) {
				for(i = 0; i < this.oInp.length; i++) {
					this.oInp[i].className = '';
					this.oDiv[i].style.display = 'none';
				}
				oInp.className = 'active';
				this.oDiv[oInp.index].style.display = 'block';
			}
		</script>
	</body>

</html>